$radio-width: 1.25rem !default;
$radio-height: $radio-width !default;
$radio-border-radius: 50% !default;
$radio-border-width: inherit !default;
$radio-label-margin: 0 1rem 0 0.5rem !default;
$radio-margin: 1rem 0 !default;

$radio-active-background-color: var(--rz-secondary) !default;
$radio-active-shadow: inset 0 3px 0 0 rgba(0, 0, 0, 0.1) !default;

$radio-checked-background-color: var(--rz-secondary) !default;
$radio-checked-hover-background-color: var(--rz-secondary-light) !default;
$radio-checked-hover-shadow: inset 0 -3px 0 0 rgba(#fff, 0.2) !default;

$radio-checked-color: var(--rz-text-contrast-color) !default;

$radio-circle-background-color: var(--rz-base-background-color) !default;
$radio-circle-shadow: inset 0 4px 7px 0 rgba(0, 0, 0, 0.03) !default;
$radio-circle-hover-background-color: var(--rz-base-100) !default;

$radio-icon-width: 0.5rem !default;
$radio-icon-height: $radio-icon-width !default;
$radio-checked-border: var(--rz-input-border) !default;

// Radio CSS variables

:root {
  --rz-radio-width: #{$radio-width};
  --rz-radio-height: #{$radio-height};
  --rz-radio-border-radius: #{$radio-border-radius};
  --rz-radio-border-width: #{$radio-border-width};
  --rz-radio-label-margin: #{$radio-label-margin};
  --rz-radio-margin: #{$radio-margin};

  --rz-radio-active-background-color: #{$radio-active-background-color};
  --rz-radio-active-shadow: #{$radio-active-shadow};

  --rz-radio-checked-background-color: #{$radio-checked-background-color};
  --rz-radio-checked-hover-background-color: #{$radio-checked-hover-background-color};
  --rz-radio-checked-hover-shadow: #{$radio-checked-hover-shadow};

  --rz-radio-checked-color: #{$radio-checked-color};

  --rz-radio-circle-background-color: #{$radio-circle-background-color};
  --rz-radio-circle-shadow: #{$radio-circle-shadow};
  --rz-radio-circle-hover-background-color: #{$radio-circle-hover-background-color};

  --rz-radio-icon-width: #{$radio-icon-width};
  --rz-radio-icon-height: #{$radio-icon-height};
  --rz-radio-checked-border: #{$radio-checked-border};
}

.rz-radio-button-list-vertical {
  .rz-radio-btn {
    display: flex;
    margin: var(--rz-radio-margin);
    align-items: center;
  }
}

.rz-radio-button-list-horizontal {
  .rz-radio-btn {
    display: inline-flex;
    align-items: center;
  }
}
.rz-radiobutton {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.rz-state-disabled .rz-radiobutton {
  cursor: initial;
}

.rz-radiobutton-label,
.rz-radiobutton-template {
  margin: var(--rz-radio-label-margin);
}

.rz-radiobutton {
  display: inline-block;
  position: relative;
  vertical-align: middle;

  width: var(--rz-radio-width);
  height: var(--rz-radio-height);
}

.rz-radiobutton-box {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: inherit;

  border: var(--rz-input-border);
  border-width: var(--rz-radio-border-width);
  border-radius: var(--rz-radio-border-radius);
  box-shadow: var(--rz-input-shadow);
  background-color: var(--rz-input-background-color);
  transition: var(--rz-transition-all);

  &:hover:not(.rz-state-disabled) {
    @extend %input-hover;
    border-width: var(--rz-radio-border-width);
  }

  &:active:not(.rz-state-disabled) {
    background-color: var(--rz-radio-active-background-color);
    box-shadow: var(--rz-radio-active-shadow);
    border-width: var(--rz-radio-border-width);
  }

  &.rz-state-disabled {
    cursor: initial;
    box-shadow: var(--rz-input-disabled-shadow);
    background-color: var(--rz-input-disabled-background-color);
    border: var(--rz-input-disabled-border);
    border-width: var(--rz-radio-border-width);
    opacity: var(--rz-input-disabled-opacity);
  }

  .rzi {
    width: var(--rz-radio-icon-width);
    height: var(--rz-radio-icon-height);
    color: var(--rz-radio-checked-color);
  }

  .rzi-circle-on {
    border-radius: var(--rz-radio-border-radius);
    vertical-align: middle;
    background-color: var(--rz-radio-circle-background-color);
    box-shadow: var(--rz-radio-circle-shadow);

    &:hover:not(.rz-state-disabled) {
      background-color: var(--rz-radio-circle-hover-background-color);
    }
  }

  &.rz-state-active {
    background-color: var(--rz-radio-checked-background-color);
    border: var(--rz-radio-checked-border);
    border-width: var(--rz-radio-border-width);

    &:hover:not(.rz-state-disabled) {
      background-color: var(--rz-radio-checked-hover-background-color);
      border: var(--rz-radio-checked-border);
      box-shadow: var(--rz-radio-checked-hover-shadow);
      border-width: var(--rz-radio-border-width);
    }

    &.rz-state-disabled {
      background-color: var(--rz-radio-checked-background-color);
      border: var(--rz-radio-checked-border);
      border-width: var(--rz-radio-border-width);
      opacity: 0.5;
    }
  }
}
